import QtQuick
import QtQml

Rectangle{
    id: way_point_set
    color:"#F7F7F7"
    anchors{
        horizontalCenter: parent.horizontalCenter
    }
    // height: 370
    radius: 5

    //title
    Text{
        id: voyage_title
        text: qsTr("自动航行")
        font.family: ("Noto Sans")
        font.pixelSize: 16
        color: "#0070D6"
        anchors{
            top: parent.top
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
    }
    //Rectangle button left right自动航行
    //点击后在地图上左键拾取, 右键回退一点
    //点击right button,开始航行
    Rectangle{
        id: auto_driver
        width: parent.width*0.8
        height: 97
        anchors{
            top: voyage_title.bottom
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }

        // get waypoint btn
        AnyArcRectCom{
            id: get_waypoint_btn
            width: parent.width *0.5
            height: 97
            color: "#0070D6"
            cornersRadius: [5,0,0,5]
            anchors{
                top: parent.top
                left: parent.left
            }

            //Text
            Text{
                id: get_waypoint_text
                text: qsTr("拾取路径")
                color: "#ffffff"
                font.family: "Noto Sans"
                font.pixelSize: 16
                font.bold: true

                anchors.centerIn: get_waypoint_btn

            }

            //onclick
        }

        // start voyage btn
        AnyArcRectCom{
            id: start_way
            width: parent.width *0.5
            height: 97
            color:"#333333"
            cornersRadius: [0,5,5,0]
            anchors{
                top: parent.top
                left: get_waypoint_btn.right
            }

            //Text
            Text{
                id: start_way_text
                text: qsTr("开始航行")
                color: "#ffffff"
                font.family: "Noto Sans"
                font.pixelSize: 16
                font.bold: true

                anchors.centerIn: start_way

            }

            //onclick
        }
    }

    //下方文字,显示下一个路径点距离,预计到达时间
    //横线分割线
    Rectangle{
        id: cross_split_line_next
        width: 288
        height: 2
        radius: 1
        color: Qt.rgba(0, 0, 0, 0.08)
        anchors{
            top: auto_driver.bottom
            topMargin: 20
            horizontalCenter: parent.horizontalCenter
        }
    }

    Rectangle{
        id: next_point
        width: parent.width
        height: 24
        anchors{
            top: cross_split_line_next.bottom
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        color: "#00000000"
        Row{
            spacing: 110
            anchors.horizontalCenter: parent.horizontalCenter
            Text{
                text: "下个路径点"
                font.family: "Noto Sans"
                font.pixelSize: 16
                font.bold: true
                color: Qt.rgba(0, 0, 0, 0.6)
            }
            Text{
                text: "WPT 012"
                font.family: "Noto Sans"
                font.pixelSize: 16
                font.bold: true
                color: "#325B9A"
            }
        }
    }

    Rectangle{
        id: distance_next
        width: parent.width
        height: 44
        anchors{
            top: next_point.bottom
            topMargin: 8
            left: parent.left
        }
        color: "#00000000"


        Rectangle{
            id: distance_next_show
            width: 91
            height: 44
            anchors{
                left: distance_next.left
                leftMargin: 60
            }
            color: "#00000000"
            Text{
                id: left_up_text
                text: qsTr("0.9")
                font.family: ("Noto Sans")
                font.pixelSize: 16
                color: "#325B9A"
                anchors{
                    top: parent.top
                    topMargin: 10
                    left: parent.left
                    leftMargin: 10
                }
            }
            Text{
                id: left_down_text
                text: qsTr("距离 / NM")
                font.family: ("Noto Sans")
                font.pixelSize: 12
                font.bold: true
                color: "#666666"
                anchors{
                    top: left_up_text.bottom
                    topMargin: 5
                    right: left_up_text.right
                }
            }
        }

        Rectangle{
            id: time_next_show
            width: 91
            height: 44
            color: "#00000000"
            anchors{
                right: distance_next.right
                rightMargin: 10
            }
            Text{
                id: time_left_up_text
                text: qsTr("0:0:12")
                font.family: ("Noto Sans")
                font.pixelSize: 16
                color: "#325B9A"
                anchors{
                    top: parent.top
                    topMargin: 10
                    right: parent.right
                    rightMargin: 10
                }
            }
            Text{
                id: time_left_down_text
                text: qsTr("预计耗时 / h:m:s")
                font.family: ("Noto Sans")
                font.pixelSize: 12
                font.bold: true
                color: "#666666"
                anchors{
                    top: time_left_up_text.bottom
                    topMargin: 5
                    right: time_left_up_text.right
                }
            }
        }

    }

    //下方文字,显示全段路径长度,预计完成时间
    //横线分割线
    Rectangle{
        id: cross_split_line
        width: 288
        height: 2
        radius: 1
        color: Qt.rgba(0, 0, 0, 0.08)
        anchors{
            top: distance_next.bottom
            topMargin: 20
            horizontalCenter: parent.horizontalCenter
        }
    }

    Rectangle{
        id: total_show
        width: parent.width
        height: 24
        anchors{
            top: cross_split_line.bottom
            topMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        color: "#00000000"
        Text{
            id: total_text
            text: "总路径信息"
            font.family: "Noto Sans"
            font.pixelSize: 16
            font.bold: true
            color: Qt.rgba(0, 0, 0, 0.6)
            anchors{
                left: parent.left
                leftMargin: 20
            }
        }
    }

    Rectangle{
        id: distance_total
        width: parent.width
        height: 44
        anchors{
            top: total_show.bottom
            topMargin: 10
            left: parent.left
        }
        color: "#00000000"


        Rectangle{
            id: distance_total_show
            width: 91
            height: 44
            anchors{
                left: distance_total.left
                leftMargin: 60
            }
            color: "#00000000"
            Text{
                id: total_up_text
                text: qsTr("10.9")
                font.family: ("Noto Sans")
                font.pixelSize: 16
                color: "#325B9A"
                anchors{
                    top: parent.top
                    topMargin: 10
                    // right: distance_total.right
                    // leftMargin: 10
                }
            }
            Text{
                id: total_down_text
                text: qsTr("距离 / NM")
                font.family: ("Noto Sans")
                font.pixelSize: 12
                font.bold: true
                color: "#666666"
                anchors{
                    top: total_up_text.bottom
                    topMargin: 5
                    right: total_up_text.right
                }
            }
        }

        Rectangle{
            id: time_total_show
            width: 91
            height: 44
            color: "#00000000"
            anchors{
                right: distance_total.right
                rightMargin: 10
            }
            Text{
                id: time_total_up_text
                text: qsTr("1:5:12")
                font.family: ("Noto Sans")
                font.pixelSize: 16
                color: "#325B9A"
                anchors{
                    top: parent.top
                    topMargin: 10
                    right: parent.right
                    rightMargin: 10
                }
            }
            Text{
                id: time_total_down_text
                text: qsTr("预计耗时 / h:m:s")
                font.family: ("Noto Sans")
                font.pixelSize: 12
                font.bold: true
                color: "#666666"
                anchors{
                    top: time_total_up_text.bottom
                    topMargin: 5
                    right: time_total_up_text.right
                }
            }
        }
    }


}

